<!-- <nz-list nzItemLayout="vertical">
    <nz-list-item *ngFor="let item of articlelife">
      <nz-list-item-meta>
        <nz-list-item-meta-avatar nzText='史家乐'></nz-list-item-meta-avatar>
        <nz-list-item-meta-title>
          <a>{{ item.title }}</a>
        </nz-list-item-meta-title>
        <nz-list-item-meta-description>
          {{ item.artist }}
        </nz-list-item-meta-description>
      </nz-list-item-meta>

      <ul nz-list-item-actions>
        <nz-list-item-action>
          <i nz-icon nzType="heart" style="margin-right: 8px;"></i>
          {{item.liked}}
        </nz-list-item-action>
        <nz-list-item-action>
          <i nz-icon nzType="eye" style="margin-right: 8px;"></i>
          {{item.viewed}}
        </nz-list-item-action>
      </ul>
      <nz-list-item-extra>
        <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
      </nz-list-item-extra>
    </nz-list-item>
  </nz-list> -->
  <div class="leftBar" nz-row nzJustify='center' style="width: 80%;height: 1840px;margin: 0 auto;">
    <div nz-col nzSpan='16'>
      <div nz-col nzSpan='22'  style="min-height: 435px;margin: 20px 0;">
        <nz-list nzBordered [nzHeader]="lifeTop">
          <nz-list-item *ngFor="let item of articlelife" style="cursor: pointer;" class="list_item">
            <span nz-typography>
              <h2>{{item.title}}</h2>
              <h4>{{'作者:'+item.artist}}</h4>
            </span>
            {{ item.date }}
          </nz-list-item>
        </nz-list>
      </div>
      <ng-template #lifeTop>
        <a (click)="goto('life')">生活...</a>
      </ng-template>
      <div nz-col nzSpan='22'  style="min-height: 435px;margin-bottom: 20px;">
        <nz-list nzBordered [nzHeader]="lifeMark">
          <nz-list-item *ngFor="let item of articlemark" style="cursor: pointer;" class="list_item">
            <span nz-typography>
              <h2>{{item.title}}</h2>
              <h4>{{'作者:'+item.artist}}</h4>
            </span>
            {{ item.date }}
          </nz-list-item>
        </nz-list>
      </div>
      <ng-template #lifeMark>
        <a (click)="goto('mark')">笔记...</a>
      </ng-template>
      <div nz-col nzSpan='22' style="min-height: 435px;margin-bottom: 20px;">
        <nz-list nzBordered [nzHeader]="lifeFront">
          <nz-list-item *ngFor="let item of articlefront" style="cursor: pointer;" class="list_item">
            <span nz-typography>
              <h2>{{item.title}}</h2>
              <h4>{{'作者:'+item.artist}}</h4>
            </span>
            {{ item.date }}
          </nz-list-item>
        </nz-list>
      </div>
      <ng-template #lifeFront>
        <a (click)="goto('front')">前端...</a>
      </ng-template>
      <div nz-col nzSpan='22' style="min-height: 435px;margin-bottom: 20px;">
        <nz-list nzBordered [nzHeader]="lifeBack">
          <nz-list-item *ngFor="let item of articleback" style="cursor: pointer;" class="list_item">
            <span nz-typography>
              <h2>{{item.title}}</h2>
              <h4>{{'作者:'+item.artist}}</h4>
            </span>
            {{ item.date }}
          </nz-list-item>
        </nz-list>
      </div>
      <ng-template #lifeBack>
        <a (click)="goto('back')">后端...</a>
      </ng-template>
    </div>
  </div>
  <div class="sideBar" style="width: 10%;height: 435px;animation: bgcChange 4s infinite alternate;border-radius: 10px;position: fixed;top: 2%;right: 15%;margin-top: 20px;overflow: hidden;">
    <h3 (click)='setOffset(0)' [ngClass]="{'truelocat':locat==1}" style="height: 25%;width: 100%;text-align: center;color: white;font-size: 20px;margin: 0;padding: 0;cursor: pointer;">生活</h3>
    <h3 (click)='setOffset(455)' [ngClass]="{'truelocat':locat==2}" style="height: 25%;width: 100%;text-align: center;color: white;font-size: 20px;margin: 0;padding: 0;cursor: pointer;">笔记</h3>
    <h3 (click)='setOffset(910)' [ngClass]="{'truelocat':locat==3}" style="height: 25%;width: 100%;text-align: center;color: white;font-size: 20px;margin: 0;padding: 0;cursor: pointer;">前端</h3>
    <h3 (click)='setOffset(1365)' [ngClass]="{'truelocat':locat==4}" style="height: 25%;width: 100%;text-align: center;color: white;font-size: 20px;margin: 0;padding: 0;cursor: pointer;">后端</h3>
  </div>

  <h1 class="bottomBar" style="width: 400px;;margin: 0 auto;text-align: center;margin-top: 60px;margin-bottom: 60px;">ERIC BLOG感谢您的参观</h1>

